<template>
  <component
    :is="components[currentComponent]"
    @backMemoList="changeComponent"
  ></component>

  <van-floating-bubble
    axis="xy"
    :z-index="9999"
    magnetic="x"
    @click="changeComponent"
    v-model:offset="offset"
  >
    <van-icon :name="icon" style="font-size: 24px" />
  </van-floating-bubble>
</template>

<script setup>
import { ref, watch } from "vue";
import { useWindowSize } from "@vueuse/core";
import Memo from "@/features/memo/Memo.vue";
import MemoAdd from "@/features/memo/MemoAdd.vue";

const currentComponent = ref("Memo");

// Keep bubble at bottom-left responsively
const { height } = useWindowSize();
const leftGap = 24;
const bottomGap = 71;
const offset = ref({ x: leftGap, y: Math.max(0, height.value - bottomGap) });

watch(height, (h) => {
  offset.value = { x: leftGap, y: Math.max(0, h - bottomGap) };
});
const icon = ref("plus");

const components = {
  Memo,
  MemoAdd,
};

function changeComponent() {
  currentComponent.value =
    currentComponent.value === "Memo" ? "MemoAdd" : "Memo";

  icon.value = icon.value === "plus" ? "arrow-left" : "plus";
}
</script>
